﻿@page
@{
    ViewData["Title"] = "菜单修改";
    Layout = "~/Pages/Admin/_Layout.cshtml";
}
<style>

    .organize-tree {
        position: absolute;
        background-color: #fff;
        padding: 5px 25px;
        z-index: 1000;
        box-shadow: 0 0 24px rgba(0,0,0,.18);
        opacity: 0;
        height: 0;
        display: none;
    }

        .organize-tree.active {
            display: block;
            opacity: 1;
            height: auto;
            max-height: 330px;
            overflow: auto;
            transition: all .5s;
        }

        .organize-tree .ztree li a {
            height: 22px !important;
        }

    .layui-iconpicker {
        max-width: 100%;
    }
</style>
<div id="app">
    <form class="layui-form form-cus" action="" lay-filter="forms">
        <div class="layui-form-item">
            <label class="layui-form-label">所属父级</label>
            <div class="layui-input-block">
                <input type="text" name="ParentName" id="ParentName" v-model="m.parentName" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="请选择所属父级" class="layui-input">
                <div class="organize-tree">
                    <div id="tree" class="layui-tree-cus"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择图标</label>
            <div class="layui-input-block">
                <input type="text" id="iconPicker" lay-filter="iconPicker" v-model="m.icon" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.name" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">唯一编码</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.code" lay-verify="required" lay-verType="tips" autocomplete="off" placeholder="用于权限控制操作" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Url地址</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.path" autocomplete="off" placeholder="请输入Url地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" v-model="m.sort" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
                </div>
            </div>
          
            <div class="layui-input-inline">
                <label class="layui-form-label">是否显示</label>
                <input type="checkbox" name="status" lay-skin="switch" lay-filter="status" checked lay-text="ON|OFF">
            </div>


        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.remarks" autocomplete="off"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-cur-submit">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>

    </form>
</div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                m: { parentName:''}
            }        
        });

        layui.use(['layer', 'jquery', 'common', 'iconPicker', 'form', 'tree'], function () {
            var form = layui.form, $ = layui.$, os = layui.common, iconPicker = layui.iconPicker,tree = layui.tree;
            iconPicker.render({
                elem: '#iconPicker',
                type: 'fontClass',
                search: true,
                page: false,
                click: function (data) {
                    vm.m.icon = data.icon;
                }
            });
            var oc =
            {
               init() {
                    if (os.getUrlParam('id') != null) {
                        
                        os.ajax('api/admin/syspermission/get',
                            { id: os.getUrlParam('id') },
                            function (res) {

                                if (res.code == 1) {
                                    vm.m = res.data;
                                    vm.$nextTick(function () {
                                        form.val('forms',
                                            {
                                                'status': vm.m.enabled
                                            });
                                    });
                                   
                                    if (vm.m.parentId ==null) {
                                        
                                        vm.m.parentName = '根目录';
                                    }

                                } else {
                                    os.error(res.msg);
                                }

                            }, 'get');

                    }
                    os.ajax('api/admin/syspermission/gettree/', {}, function (res) {
                        var node = {
                            id:null,
                            title:'根目录',
                            spread:true
                        }
                        res.data.splice(0, 0, node);
                        tree.render({
                            elem: '#tree'
                            , data: res.data
                            , onlyIconControl: true
                            , click: function (obj) {
                                id = obj.data.id;
                                vm.m.parentId = obj.data.id;
                                vm.m.parentName = obj.data.title;
                                $(".organize-tree").removeClass('active');
                            }
                        });
                    },'get');
                }

            }

            oc.init();
            var index = parent.layer.getFrameIndex(window.name);


            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/admin/syspermission/add";
                if (os.getUrlParam('id') != null) {
                    urls = "api/admin/syspermission/update";
                }

                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.code === 1) {
                        parent.layer.close(index);
                        //刷新父页面的数据
                        $('button[data-type="reload"]', window.parent.document).click();
                    } else {
                        os.error(res.msg);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });


            form.on('switch(status)',
                function (data) {
                   
                    vm.m.enabled = data.elem.checked == true?1:0;
                   
                });
        
            $("#ParentName").click(function () {
                $(".organize-tree").addClass('active');
            });
            $(".organize-tree").mouseleave(function () {
                $(".organize-tree").removeClass('active');
            });
           
        });
    </script>



